<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/tm.js" data-config="../js/config.js"></script>
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>
    <div id="app">
        <div class="search" id="search">
            <div class="menuButton" id="menuButton">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <input type="text" class="input" 
                v-model="keyWord" 
                @keyup.enter="openSelect"
                @keydown.up="up"
                @keydown.down="down"
                placeholder="search" id="search">
            <div class="drag"></div>
            <div class="close" id="close">×</div>
        </div>

        <div class="refresh" id="refresh">
            <img src="../../image/refresh.png" id="refreshImg">
            <div>
                <span>上次更新：{{lastUpdate == "" ? "从未更新" : lastUpdate}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span>耗时：{{consume}}ms</span>
            </div>
        </div>

        <div class="settingBack" id="settingBack"></div>
        <div class="open" id="open">
            <div></div>
        </div>
        <div class="setting" id="setting">
            <div style="line-height: 40px; padding-left: 15px;">设置</div>
            <div style="height: 1px; width: 300px; background: #eee;"></div>
            <ul id="settingList" class="settingList">
                <li>
                    <div class="title">常规</div>
                    <div class="content">
                        <strong>启动：</strong><br>
                        <input type="checkbox" v-model="setting.autoRun">开机自动运行<br>
                    </div>
                    <div class="content">
                        <strong>关闭主面板：</strong><br>
                        <input type="radio" value="minimize" v-model="setting.close">最小化到系统托盘<br>
                        <input type="radio" value="quit" v-model="setting.close">退出<br>
                    </div>
                    <div class="content">
                        <strong>程序后台：</strong><br>
                        <input type="checkbox" v-model="setting.troyIcon">显示托盘图标<br>
                    </div>
                    <div class="content">
                        <strong>窗口：</strong><br>
                        <input type="checkbox" v-model="setting.onTop">保持窗口最前<br>
                    </div>
                </li>
                <li>
                    <div class="title">搜索设置</div>
                    <div class="content">
                        <strong>搜索路径(刷新生效)：</strong>
                        <span @click="setting.dirPathList = !setting.dirPathList">点击保存</span><br>
                        <input type="text" placeholder="检索路径" 
                            v-for="(i, index) in settingCache.dirPathList" v-model="settingCache.dirPathList[index]">
                        <div class="add" @click="settingCache.dirPathList.push('')"><div></div></div>
                    </div>
                    <div class="content">
                        <strong>高亮格式(css)：</strong>
                        <span>这是<span :style="setting.highlight">预览</span>的高亮样式</s[an]>
                        <textarea v-model="setting.highlight"></textarea>
                    </div>
                    <div class="content">
                        <strong>支持搜索的后缀名(不支持正则)：</strong>
                        <span @click="setting.extensions = !setting.extensions">点击保存</span><br>
                        <input type="text" placeholder="后缀" 
                            v-for="(i, index) in settingCache.extensions" v-model="settingCache.extensions[index]">
                        <div class="add" @click="settingCache.extensions.push('')"><div></div></div>
                    </div>
                    <div class="content">
                        <strong>关键字过滤(支持正则)：</strong>
                        <span @click="setting.filter = !setting.filter">点击保存</span><br>
                        <input type="text" placeholder="关键字" 
                            v-for="(i, index) in settingCache.filter" v-model="settingCache.filter[index]">
                        <div class="add" @click="settingCache.filter.push('')"><div></div></div>
                    </div>
                    <div class="content" id="aliasDispaly">
                        <strong>别名(快速检索)：</strong>
                        <div v-for="(i, index) in settingCache.alias" class="alias">
                            <div name="aliasBlock">
                                <span name="alias">{{i.alias}}</span>
                            </div>
                            <div name="pathBlock">
                                <span name="path">{{i.path}}</span>
                            </div>
                            <div name="close" :index="index">x</div>
                            <div style="clear: both;"></div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="title">快捷键</div>
                    <div class="content">
                        <strong>全局唤醒：</strong><br>
                        <input type="text" v-model.lazy="setting.shortcut"><br>
                    </div>
                </li>
                <li>
                    <div class="title">高级选项</div>
                    <div class="content">
                        <strong>开发模式：</strong><br>
                        <input type="checkbox" v-model="setting.openDevTools">开启开发者工具<br>
                    </div>
                </li>
                <li>
                    <div class="title">关于</div>
                    <div class="content">
                        <strong>作者：方瑾</strong><br>
                        <strong>联系邮箱：fangjin.1227@qq.com</strong><br>
                    </div>
                    <div class="content">
                        <strong>支持一下：</strong><br>
                        <img src="../../image/weixin.png" class="weixin">
                    </div>
                </li>
                <li>
                    <div class="content">
                        <div>纵横交错兮天下之局，谁能参悟兮世事如棋</div><br>
                    </div>
                </li>
            </ul>
        </div>

        <div class="line" id="line">
            <div class="horizontal"></div>
            <div class="vertical" id="vertical">
                <div></div>
            </div>
        </div>

        <ul id="result" class="result">
            <div>
                <li v-for="(file, i) in list" :style="{background: i == index ? '#eee' : '#fff'}" :name="i">
                    <div name="fileName" class="fileName" 
                        :style="{ width: fileNameWidth + 'px' }"
                        v-html="(file.alias || '') + file.name"
                        :title="file.name.replace(/<[\s\S]*?>/g, '')">
                    </div>
                    <div name="filePath" class="filePath"
                        :style="{ width: (960 - fileNameWidth) + 'px' }"
                        v-html="file.path"
                        :title="file.path.replace(/<[\s\S]*?>/g, '')">
                    </div>
                    <div style="clear: both;"></div>
                </li>
            <div>
        </ul>

        <div style="height: 100%; width: 100%; position: fixed; z-index: -1; top: 0;" id="setAliasBack"></div>
        <div class="setAliasWindow" id="setAliasWindow">
            <div id="setAliasTitle">设置别名</div>
            <div name="path">
                <span id="aliasPath">{{aliasPath}}</span>
            </div>
            <input type="text" placeholder="请设置别名" id="alias" @keyup.enter="setAlias">
        </div>

    </div>
</body>

</html>